<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			background-color: #222;
		}
		.tool {
			margin: 50px auto;
			position: relative;
			width: 200px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			background-color: #fff;
			border: 8px solid #666;
			-webkit-border-radius: 30px;
			-moz-border-radius: 30px;
			border-radius: 30px;
			-webkit-box-shadow: 2px 2px 4px #888;
			-moz-box-shadow: 2px 2px 4px #888;
			box-shadow: 2px 2px 4px #888;
		}

		.tool:before {
			content: ' ';
			position: absolute;
			width: 0;
			height: 0;
			left: 30px;
			top: 100px;
			border: 25px solid;
			border-color: #666 transparent transparent #666;
		}

		.tool:after {
			content: ' ';
			position: absolute;
			width: 0;
			height: 0;
			left: 38px;
			top: 100px;
			border: 15px solid;
			border-color: #fff transparent transparent #fff;
		}

		.link {
			margin: 50px auto;
			position: relative;
			width: 200px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			background-color: #fff;
			border: 8px solid #666;
			-webkit-border-radius: 58px;
			-moz-border-radius: 58px;
			border-radius: 58px;
			-webkit-box-shadow: 2px 2px 4px #888;
			-moz-box-shadow: 2px 2px 4px #888;
			box-shadow: 2px 2px 4px #888;
		}


		.link:before,
		.link:after {
			content: '';
			position: absolute;
			left: 10px;
			top: 70px;
			width: 40px;
			height: 40px;
			background-color: #fff;
			border: 8px solid #666;
			-webkit-border-radius: 28px;
			-moz-border-radius: 28px;
			border-radius: 28px;
			z-index: 5;
		}

		.link:after {
			position: absolute;
			width: 20px;
			height: 20px;
			left: 5px;
			top: 100px;
			-webkit-border-radius: 18px;
			-moz-border-radius: 18px;
			border-radius: 18px;
			z-index: 6;
		}

		.m1 {
			margin: 50px auto;
			width: 200px;
			height: 80px;
			background-color: skyblue;
			border-bottom-color: skyblue;
			color: #fff;
			font-size: 12px;
			line-height: 18px;
			padding: 5px 12px 5px 12px;
			box-sizing: border-box;
			border-radius: 6px;
			position: relative;
			word-break: break-all;
		}
		.m1::after {
		    content: '';
		    position: absolute;
		    top: 0;
		    right: -24px;
		    width: 20px;
		    height: 20px;
		    border-width: 0 0 20px 20px;
		    border-style: solid;
		    border-bottom-color: inherit;
		    /*自动继承父元素的border-bottom-color*/
		    border-left-color: transparent;
		    border-radius: 0 0 60px 0;
		}
	</style>
	<body>
		<p class="tool">susu</p>
		<p class="link">susu...</p>
		<p class="m1">susu</p>
	</body>
</html>
